﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MantenimientoDeComercios.aspx.cs" Inherits="Web_Guia_Digital_Georeferenciada.Mantenimientos.MantenimientoDeComercios" %>


<!DOCTYPE html>
<html>
<head>
    <title>Guía Georeferenciada</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!-- Bootstrap core CSS -->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet" media="screen">
    <!-- Estilos ventana -->
    <script src="../Content/scriptsPrincipal.js"></script>
    <link href="../Content/stylesPrincipal.css" rel="stylesheet" />
    <link href="../Content/Carousel.css" rel="stylesheet" />

    <!-- input imagen -->
    <link href="../Content/fileinput.css" media="all" rel="stylesheet" type="text/css" />

    <!-- Mapas -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry" type="text/javascript"></script>
    <style>
        #cmdObtenerCoordenadas {
            width: 61px;
        }

        #map-container {
            height: 450px;
        }
         #LstTags{
            width: 52px;
        }

         div.bootstrap-tagsinput input {
             width: 100px;
         }

    </style>
    <!-- Footer -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link href="~/Content/sticky-footer.css" rel="stylesheet" />
    <script src="~/Content/ie-emulation-modes-warning.js"></script>
    <!-- Footer -->
</head>
<body>
    <form runat="server">
        <div id="wrap">
            <div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav nav-justified">
                        <li runat="server" id="paginaprincipal"><a href="<%= Page.ResolveUrl("~/PaginaPrincipalBT.aspx") %>">Principal</a></li>
                        <li runat="server" id="posicion"><a href="<%= Page.ResolveUrl("~/BusquedaComerciosGeoreferenciado.aspx") %>">Posición</a></li>
                        <li runat="server" id="ampliada"><a href="<%= Page.ResolveUrl("~/BusquedaComercios.aspx") %>">Busqueda ampliada</a></li>
                        <li runat="server" id="cercanos"><a href="<%= Page.ResolveUrl("~/BusquedaComerciosCercanos.aspx") %>">Cercanos</a></li>
                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Gestiones <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li class="active" runat="server" id="comercios"><a href="<%= Page.ResolveUrl("~/Mantenimientos/MantenimientoDeComercios.aspx") %>">Gestión comercio</a></li>
                                <li runat="server" id="usuarios"><a href="<%= Page.ResolveUrl("~/Mantenimientos/MantenimientoDeUsuariosFinales.aspx") %>">Gestión Usuario final</a></li>
                                <li runat="server" id="productos"><a href="<%= Page.ResolveUrl("~/Mantenimientos/MantenimientoDeProductos.aspx") %>">Mantenimiento de productos</a></li>
                                <li runat="server" id="rubros"><a href="<%= Page.ResolveUrl("~/Mantenimientos/MantenimientoRubros.aspx") %>">Mantenimiento de rubros</a></li>
                            </ul>
                        </li>
                        <li></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true">
                            <asp:Label ID="lblUsuario" runat="server">Usuario: </asp:Label></span></a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->

                <!--/.container -->
            </div>
            <!--/.navbar -->
            <!-- Begin page content -->
            <div class="container">

                <h1 class="text-center">Gestión de Comercio</h1>
                <div class="form-horizontal" role="form">
                </div>
                <div class="col-lg-4">
                    <div class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Nombre</label>
                            <div class="col-lg-9">
                                <asp:TextBox ID="txtNombre" runat="server" class="form-control input-sm" placeholder="Nombre del comercio"></asp:TextBox>
                                <asp:TextBox ID="txtId" runat="server" Width="16px" Visible="False"></asp:TextBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">R.U.T</label>
                            <div class="col-lg-9">
                                <asp:TextBox ID="txtRut" runat="server" class="form-control input-sm" placeholder="R.U.T"></asp:TextBox>
                                <asp:RegularExpressionValidator ID="valRut" runat="server" ErrorMessage="el campo R.U.T debe contener solo numeros" ForeColor="Black" ControlToValidate="txtRut" ValidationExpression="/^[0-9]+$/"></asp:RegularExpressionValidator>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Dirección</label>
                            <div class="col-lg-9">
                                <asp:TextBox ID="txtDireccion" runat="server" class="form-control col-lg-9" placeholder="Ingrese la direccion o seleccione un punto en el mapa"></asp:TextBox>
                                <asp:TextBox ID="txtLongitud" runat="server" class="form-control col-lg-9"></asp:TextBox>
                                <button type="button" class="btn btn-default btn-sm col-lg-6" data-toggle="modal" data-target="#mapmodals">
                                    Ver mapa
                                    <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
                                </button>
                                <button type="button" class="btn btn-default btn-sm col-lg-6" onclick="ObtenerPosicion();">
                                    Mi posición
                            <span class="glyphicon glyphicon-screenshot" aria-hidden="true"></span>
                                </button>
                            </div>

                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="mapmodals">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title">Seleccione un punto en el mapa o arraste el marcador.</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div id="map-container"></div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="close" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal -->
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Sucursales</label>
                            <div class="col-lg-9">
                                <div class="controls form-inline">
                                    <asp:DropDownList ID="cmbSucursales" runat="server" CssClass="form-control" Width="82%">
                                    </asp:DropDownList>
                                    <asp:Button runat="server" ID="AgregarSucursal" type="button" class="btn btn-default btn-sm" Text="+" OnClick="AgregarSucursal_Click"></asp:Button>
                                </div>
                                <asp:ListBox ID="ListaSucursales" class="form-control" runat="server"></asp:ListBox>

                            </div>

                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Usuario</label>
                            <div class="col-lg-9">
                                <asp:TextBox ID="txtNombreUsuario" runat="server" class="form-control input-sm" placeholder="Usuario"></asp:TextBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Password</label>
                            <div class="col-lg-9">
                                <asp:TextBox ID="txtPassword" runat="server" class="form-control input-sm" placeholder="Password"></asp:TextBox>
                                <asp:TextBox ID="txtPasswordSecundario" runat="server" class="form-control input-sm" placeholder="Repita password"></asp:TextBox>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Teléfono</label>
                            <div class="col-lg-9">
                                <asp:TextBox ID="txtTelefono" runat="server" class="form-control input-sm" placeholder="Teléfono"></asp:TextBox>
                                <asp:RegularExpressionValidator ID="valTelefono" runat="server" ErrorMessage="el campo teléfono debe contener solo numeros" ForeColor="Black" ControlToValidate="txtTelefono" ValidationExpression="/^[0-9]+$/"></asp:RegularExpressionValidator>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Web</label>
                            <div class="col-lg-9">
                                <asp:TextBox ID="txtWeb" runat="server" class="form-control input-sm" placeholder="Página Web"></asp:TextBox>
                            </div>
                        </div>
                        <link rel="stylesheet" href="../Content/bootstrap-tag-inputs.css" type="text/css" />
                        <script src="../Content/bootstrap-tagsinput.min.js"></script>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Tag</label>
                            <div class="col-lg-7" >
                                <input id="LstTags" runat="server" type="text" data-role="tagsinput"
                                    placeholder="Ingrese tags y presione enter" />
                            </div>
                        </div>
                        <br />
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Rubros</label>
                            <div class="col-lg-9">
                                <div class="controls form-inline">
                                    <asp:DropDownList ID="cmbRubros" runat="server" CssClass="form-control" Width="80%">
                                    </asp:DropDownList>
                                    <asp:Button runat="server" ID="cmdAgregarRubro" type="button" class="btn btn-default btn-sm" Text="+" OnClick="cmdAgregarRubro_Click"></asp:Button>
                                </div>
                                <asp:ListBox ID="ListRubros" class="form-control" runat="server"></asp:ListBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Anuncio</label>
                            <div class="col-lg-9">
                                <asp:TextBox ID="txtAnuncio" runat="server" class="form-control input-sm" TextMode="MultiLine" Rows="3" placeholder="Agregue un anuncio para el comercio"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-lg-3 control-label">E-mail</label>
                            <div class="col-lg-9">
                                <asp:TextBox ID="txtEmail" runat="server" class="form-control input-sm" placeholder="Correo electrónico"></asp:TextBox>
                                <asp:RegularExpressionValidator ID="valmail" runat="server" ControlToValidate="txtEmail" ErrorMessage="El formato de correo es xxx@xxxx.xxx" ForeColor="Black" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Barrio</label>
                            <div class="col-lg-9">
                                <asp:DropDownList ID="cmbBarrio" runat="server" CssClass="form-control">
                                </asp:DropDownList>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Redes sociales</label>
                            <div class="col-lg-9">
                                <div class="controls form-inline">
                                    <asp:DropDownList ID="cmbRedSocial" runat="server" CssClass="form-control" Width="42%">
                                    </asp:DropDownList>
                                    <asp:TextBox ID="txtAgregarRedSocial" class="form-control input-sm" runat="server" Width="41%"></asp:TextBox>
                                    <asp:Button runat="server" ID="cmdAgregarRedSocial" OnClick="cmdAgregarRedSocial_Click" type="button" class="btn btn-default btn-sm" Width="13%" Text="+"></asp:Button>
                                </div>
                                <asp:GridView ID="GridRedesSociales" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#336666" BorderStyle="Double" BorderWidth="3px" CellPadding="4" GridLines="Horizontal" Height="16px" Width="286px">
                                    <Columns>
                                        <asp:BoundField AccessibleHeaderText="RedId" HeaderText="RedId" Visible="False" DataField="RedId" />
                                        <asp:HyperLinkField AccessibleHeaderText="RedNombre" DataNavigateUrlFields="RedId" DataNavigateUrlFormatString="MantenimientoDeComercios.aspx?RedId={0}" DataTextField="RedNombre" HeaderText="Red Social" />
                                        <asp:BoundField AccessibleHeaderText="RedDescripcion" DataField="RedDescripcion" HeaderText="Dirección" />
                                    </Columns>
                                    <FooterStyle BackColor="White" ForeColor="#333333" />
                                    <HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
                                    <PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" />
                                    <RowStyle BackColor="White" ForeColor="#333333" />
                                    <SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
                                    <SortedAscendingCellStyle BackColor="#F7F7F7" />
                                    <SortedAscendingHeaderStyle BackColor="#487575" />
                                    <SortedDescendingCellStyle BackColor="#E5E5E5" />
                                    <SortedDescendingHeaderStyle BackColor="#275353" />
                                </asp:GridView>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Imagen</label>
                            <div class="col-lg-9">
                                <%--<input id="imgLogo" runat="server" class="file" type="file" multiple="multiple" />--%>
                                <asp:FileUpload ID="FileUpload1" runat="server" class="file" />
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <br />
            <div class="container">
                <asp:Button ID="cmdAceptar" runat="server" OnClick="cmdAceptar_Click" class="btn btn-primary" Text="Aceptar" Width="13%" />
                <asp:Button ID="cmCancelar" runat="server" class="btn btn-default" Text="Cancelar" Width="13%" OnClick="cmCancelar_Click" />
            </div>
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />


    </form>
    <footer class="footer" role="contentinfo">
        <div class="container">
            <center>
        <ul style="list-style:none" >
        <li ><a href="<%= Page.ResolveUrl("~/PreguntasFrecuentes.aspx") %>">Preguntas frecuentes</a></li>       
        <li ><b style="color:gray">Contáctenos: </b><b style="color:gray">guiageoreferenciada@hotmail.com</b></li>       
        </ul>
        </center>
        </div>
    </footer>

    <!-- Footer -->
    <script src="~/Content/ie10-viewport-bug-workaround.js"></script>
    <!-- Footer -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script>
        var contador = 1;
        var nombreTags = "tag";
        var infowindow; var marcadores = [];
        var geocoder; var marker; var latLng; var latLng2;
        var PosicionAleatoria;
        var var_location = new google.maps.LatLng(45.430817, 12.331516);

        // INICiALIZACION DE MAPA
        function CargarMapa() {
            geocoder = new google.maps.Geocoder();
            map = new google.maps.Map(document.getElementById('map-container'), {
                zoom: 14,
                center: latLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            // CREACION DEL MARCADOR  
            marker = new google.maps.Marker({
                position: latLng,
                title: 'Arrastra el marcador para buscar comercios cerca',
                map: map,
                draggable: true
            });
            // Escucho el CLICK sobre el mapa y si se produce actualizo la posicion del marcador 
            google.maps.event.addListener(map, 'click', function (event) {
                updateMarker(event.latLng);
            });
            // Inicializo los datos del marcador
            geocodePosition(latLng);
            google.maps.event.addListener(marker, 'dragend', function () {
                updateMarker(marker.getPosition());
            });
            // Permito la gesti¢n de los eventos DOM

            // RECUPERO LOS DATOS LON LAT Y DIRECCION Y LOS PONGO EN EL FORMULARIO
            function updateMarkerPosition(latLng) {
                geocodePosition(latLng);
                $('#txtLongitud').val(latLng.lng() + ";" + latLng.lat());
            }
            // ACTUALIZO LA POSICION DEL MARCADOR
            function updateMarker(location) {
                marker.setPosition(location);
                updateMarkerPosition(location);
            }
            function updateMarkerAddress(str) {

                $('#txtDireccion').val(str);
            }
            // ESTA FUNCION OBTIENE LA DIRECCION A PARTIR DE LAS COORDENADAS POS
            function geocodePosition(pos) {
                geocoder.geocode({
                    latLng: pos
                }, function (responses) {
                    if (responses && responses.length > 0) {
                        updateMarkerAddress(responses[0].formatted_address);
                    } else {
                        updateMarkerAddress('No puedo encontrar esta direccion.');
                    }
                });
            }

        }
        function map_init() {
            if (latLng == null) {
                latLng = new google.maps.LatLng(-34.907, -56.157);
            }
            CargarMapa();
        }

        google.maps.event.addDomListener(window, 'load', map_init);

        //start of modal google map
        $('#mapmodals').on('shown.bs.modal', function () {
            google.maps.event.trigger(map, "resize");
            map.setCenter(latLng);
        });
        $('#cmdObtenerCoordenadas').click(function (e) {
            e.preventDefault(); // Usamos esta línea para cancelar el postback que el botón crea
            var parametros = {
                posicion: $('#txtLongitud').val()
            };
            $.ajax({
                type: 'POST',                               // tipo de llamada (POST, GET)
                url: '~/Mantenimientos/MantenimientoDeComercios.aspx',                // el URL del método que vamos a llamar
                data: JSON.stringify(parametros),           // los parámetros en formato JSON
                contentType: "application/json; charset=utf-8",
                dataType: "json",                           // tipo de datos enviados al servidor
            });
        });
        function ObtenerPosicion() {
            var options = {
                enableHighAccuracy: true,
                timeout: 45000
            };

            navigator.geolocation.getCurrentPosition(GetPosition, funcionError, options);


            function GetPosition(posicion) {
                latLng = new google.maps.LatLng(posicion.coords.latitude, posicion.coords.longitude);
                Cargardir(latLng);
                var latitudYLongitud = posicion.coords.latitude + ";" + posicion.coords.longitude;
                $("#txtLongitud").val(latitudYLongitud);
            }
            function funcionError(error) {
                alert(error.message);
            }
        }
        function Cargardir(pos) {
            geocoder = new google.maps.Geocoder();

            geocoder.geocode({
                latLng: pos
            }, function (responses) {
                if (responses && responses.length > 0) {
                    updateAddress(responses[0].formatted_address);
                } else {
                    updateAddress('No puedo encontrar esta direccion.');
                }
            });
        }
        function updateAddress(str) {
            $('#txtDireccion').val(str);

        }
        function AgregarSucursal() {
            var ddlReport = document.getElementById("<%=cmbSucursales.ClientID%>");
            var Text = ddlReport.options[ddlReport.selectedIndex].text;
            var yatiene = $("#lblSucursales").val();
            if (yatiene.length > 0) {
                yatiene = yatiene + ',' + Text;
            }
            else {
                yatiene = Text
            }
            $('#lblSucursales').val(yatiene);
        }


        function AgregarRubro() {

            var dropDownListRef = document.getElementById('<%= ListRubros.ClientID %>');
            var ddlReport = document.getElementById("<%=cmbRubros.ClientID%>");
            var Text = ddlReport.options[ddlReport.selectedIndex].text;
            var Value = ddlReport.options[ddlReport.selectedIndex].value;
            var optionsList = '';
            var esta = false;
            for (var i = 0; i < dropDownListRef.options.length; i++) {
                if (Text == dropDownListRef.options[i].text) {
                    esta = true;
                }
            }
            if (esta == false) {
                var option1 = document.createElement("option");
                option1.text = Text;
                option1.value = Value;
                dropDownListRef.options.add(option1);
            }
            else
                alert('El rubro ya fue ingresado');

            for (var i = 0; i < dropDownListRef.options.length; i++) {

                var optionText = dropDownListRef.options[i].text;
                var optionValue = dropDownListRef.options[i].value;
                if (optionsList.length > 0)

                    optionsList += ';';
                optionsList += optionText;
                optionsList += ';';
                optionsList += optionValue;
            }
            document.getElementById('<%= ListRubros.ClientID %>').value = optionsList;
        }
    </script>
</body>
<script src="../Content/fileinput.js" type="text/javascript"></script>
<script>
    $("#imgLogo").fileinput({
        'allowedFileExtensions': ['jpg', 'png', 'gif'],
    });
    $(document).ready(function () {
        $("#test-upload").fileinput({
            'showPreview': false,
            'allowedFileExtensions': ['jpg', 'png', 'gif'],
            'elErrorContainer': '#errorBlock'
        });
    });
</script>
</html>



